<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Zookeeper Viewer</title>
    <link rel="stylesheet" href="/webjars/bootstrap/5.1.3/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding-top: 20px;
        }
        .node-tree {
            margin-top: 20px;
        }
        .node-item {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        .node-item:last-child {
            border-bottom: none;
        }
        .node-path {
            font-weight: bold;
            color: #0d6efd;
        }
        .node-data {
            margin-top: 5px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
            word-break: break-all;
        }
        .node-meta {
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
        }
        .action-buttons {
            margin-top: 10px;
        }
        .breadcrumb {
            background-color: #f8f9fa;
        }
        .alert {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <header class="mb-5">
        <h1 class="text-center">Zookeeper Viewer</h1>
        <p class="text-center text-muted">Zookeeper节点查看与管理工具</p>
    </header>

    <!-- 消息提示区域 -->
    <div th:if="${successMessage}" class="alert alert-success" role="alert">
        <span th:text="${successMessage}"></span>
    </div>
    <div th:if="${errorMessage}" class="alert alert-danger" role="alert">
        <span th:text="${errorMessage}"></span>
    </div>

    <!-- 路径导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/">根节点</a>
            </li>
            <!-- 动态生成路径导航 -->
            <th:block th:if="${currentPath != null && currentPath != '/' && #strings.length(currentPath) > 1}">
                <th:block th:with="cleanPath = ${#strings.substring(currentPath, 1)}">
                    <th:block th:with="pathSegments = ${#strings.length(cleanPath) > 0 ? #strings.listSplit(cleanPath, '/') : T(java.util.Collections).emptyList()}">
                        <th:block th:each="segment, index : ${pathSegments}">
                            <th:block th:with="partialPath = ${#strings.listJoin(pathSegments.subList(0, index.index + 1), '/')}">
                                <li th:class="${index.last} ? 'breadcrumb-item active' : 'breadcrumb-item'" th:attr="aria-current=${index.last} ? 'page' : null">
                                    <a th:if="!${index.last}" th:href="@{/view(path=${'/'+partialPath})}" th:text="${segment}"></a>
                                    <span th:if="${index.last}" th:text="${segment}"></span>
                                </li>
                            </th:block>
                        </th:block>
                    </th:block>
                </th:block>
            </th:block>
        </ol>
    </nav>

    <!-- 当前节点信息 -->
    <div th:if="${node}" class="mb-5">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">节点信息</h3>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>路径:</strong> <span class="node-path" th:text="${node.path}"></span>
                </div>
                <div class="mb-3">
                    <strong>数据:</strong>
                    <div class="node-data" th:text="${node.data}"></div>
                </div>
                <div class="node-meta">
                    <div class="mb-1"><strong>创建时间:</strong> <span th:text="${#dates.format(new java.util.Date(node.ctime), 'yyyy-MM-dd HH:mm:ss')}"></span></div>
                    <div class="mb-1"><strong>修改时间:</strong> <span th:text="${#dates.format(new java.util.Date(node.mtime), 'yyyy-MM-dd HH:mm:ss')}"></span></div>
                    <div class="mb-1"><strong>节点类型:</strong> <span th:text="${node.isLeaf ? '叶子节点' : '非叶子节点'}"></span></div>
                    <div th:if="${node.acl}" class="mb-1"><strong>ACL:</strong> <span th:text="${node.acl}"></span></div>
                </div>
                <div class="action-buttons">
                    <a th:href="@{/edit(path=${node.path})}" class="btn btn-primary btn-sm mr-2">编辑</a>
                    <a th:href="@{/delete(path=${node.path})}" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除这个节点吗？如果有子节点也会一并删除。');">删除</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 子节点列表 -->
    <div th:if="${children != null and !children.isEmpty()}" class="node-tree">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <button id="selectAllBtn" class="btn btn-secondary btn-sm mr-3">全选</button>
                        <button id="batchDeleteBtn" class="btn btn-danger btn-sm mr-3" disabled="true">批量删除</button>
                        <h3 class="card-title mb-0">子节点列表</h3>
                    </div>
                    <a th:href="@{/create(parentPath=${currentPath})}" class="btn btn-success">创建子节点</a>
                </div>
            </div>
            <div class="card-body">
                <div th:each="child : ${children}" class="node-item">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" class="node-checkbox mr-3" th:value="${child.path}">
                            <a th:href="@{/view(path=${child.path})}" class="node-path" th:text="${child.path}"></a>
                            <span th:if="!${child.isLeaf}" class="text-muted ml-2">(非叶子节点)</span>
                            <span th:if="${child.isLeaf}" class="text-muted ml-2">(叶子节点)</span>
                        </div>
                        <div>
                            <a th:href="@{/edit(path=${child.path})}" class="btn btn-primary btn-sm mr-2">编辑</a>
                            <a th:href="@{/delete(path=${child.path})}" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除这个节点吗？如果有子节点也会一并删除。');">删除</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 批量删除表单 -->
    <form id="batchDeleteForm" action="/batch-delete" method="post">
        <input type="hidden" id="selectedPaths" name="selectedPaths" value="">
        <input type="hidden" name="returnPath" th:value="${currentPath}">
    </form>

    <!-- 无子节点提示 -->
    <div th:if="${node != null and node.isLeaf}" class="alert alert-info mt-4">
        该节点是叶子节点，没有子节点。
    </div>

    <!-- 无内容时的创建按钮 -->
    <div th:if="${node == null}" class="text-center mt-5">
        <a th:href="@{/create(parentPath=${currentPath})}" class="btn btn-success btn-lg">创建第一个节点</a>
    </div>

    <footer class="mt-8 text-center text-muted">
        <p>Zookeeper Viewer &copy; 2023</p>
    </footer>
</div>

<script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
<script src="/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script>
    // 批量删除相关逻辑
    $(document).ready(function() {
        // 全选/取消全选
        $('#selectAllBtn').click(function() {
            const isChecked = $(this).text() === '全选';
            $('.node-checkbox').prop('checked', isChecked);
            $(this).text(isChecked ? '取消全选' : '全选');
            updateBatchDeleteButton();
        });
        
        // 单个复选框点击事件
        $('.node-checkbox').change(function() {
            updateBatchDeleteButton();
            // 检查是否所有复选框都被选中
            const allChecked = $('.node-checkbox:checked').length === $('.node-checkbox').length;
            $('#selectAllBtn').text(allChecked ? '取消全选' : '全选');
        });
        
        // 更新批量删除按钮状态
        function updateBatchDeleteButton() {
            const hasChecked = $('.node-checkbox:checked').length > 0;
            $('#batchDeleteBtn').prop('disabled', !hasChecked);
        }
        
        // 批量删除按钮点击事件
        $('#batchDeleteBtn').click(function() {
            const selectedPaths = $('.node-checkbox:checked').map(function() {
                return $(this).val();
            }).get().join(',');
            
            if (selectedPaths) {
                if (confirm('确定要删除选中的 ' + $('.node-checkbox:checked').length + ' 个节点吗？如果有子节点也会一并删除。')) {
                    $('#selectedPaths').val(selectedPaths);
                    $('#batchDeleteForm').submit();
                }
            }
        });
    });
</script>
</body>
</html>